<template>
  <div class="filterRow">
    <el-input
      v-model="formData.bill_no"
      class="m-2"
      :placeholder="$t('订单号搜索')"
      clearable
    />
    <el-select
      class="m-2"
      v-model="formData.coin_name"
      :placeholder="$t('币种')"
      clearable
    >
      <el-option
        v-for="item in coins"
        :key="item.coin_name"
        :label="item.coin_name"
        :value="item.coin_name"
      />
    </el-select>
    <el-select
      class="m-2"
      v-model="formData.status"
      :placeholder="$t('订单状态')"
      clearable
    >
      <el-option
        v-for="item in status"
        :key="item.key"
        :label="item.name"
        :value="item.key"
      />
    </el-select>
    <el-select
      class="m-2"
      v-model="formData.orderTypes"
      :placeholder="$t('订单类型')"
      clearable
    >
      <el-option
        v-for="item in orderTypes"
        :key="item.value"
        :label="item.name"
        :value="item.value"
      />
    </el-select>
    <el-date-picker
      class="m-2"
      style="max-width: 30%; min-width: 200px"
      v-model="formData.time"
      type="daterange"
      range-separator="-"
      :start-placeholder="$t('开始时间')"
      :end-placeholder="$t('结束时间')"
      @change="calendarChange"
      clearable
    />
    <el-button class="m-2" type="primary" @click="searchData">{{
      $t("查询")
    }}</el-button>
    <el-button
      icon="Download"
      class="m-2"
      text
      type="primary"
      @click="exportData"
    >
      {{ $t("导出") }}
    </el-button>
  </div>

  <el-table :data="walletOrderList" v-loading="loading">
    <el-table-column
      prop="bill_no"
      :label="$t('订单号')"
      align="center"
      width="250"
    />
    <el-table-column align="center" :label="$t('订单状态')">
      <template #default="scope">
        <el-tag class="ml-2" :type="getCurrentStatus(scope.row.status).type">{{
          getCurrentStatus(scope.row.status).name
        }}</el-tag>
      </template>
    </el-table-column>
    <el-table-column align="center" prop="trade_type" :label="$t('订单类型')" />
    <el-table-column align="center" prop="coin_name" :label="$t('币种')" />
    <el-table-column align="center" prop="amount" :label="$t('数量')" />
    <el-table-column
      align="center"
      prop="create_time"
      :label="$t('时间')"
      width="200"
    >
      <template #default="scope">
        {{ dayjs(scope.row.create_time * 1000).format("YYYY-MM-DD HH:mm:ss") }}
      </template>
    </el-table-column>
    <el-table-column
      align="center"
      fixed="right"
      :label="$t('操作')"
      width="150"
    >
      <template #default="scope">
        <el-button
          round
          icon="MoreFilled"
          class="cursor-pointer"
          @click="showCurrentDetail(scope)"
          >{{ $t("查看") }}</el-button
        >
      </template>
    </el-table-column>
  </el-table>

  <div class="flex justify-center mt-5">
    <el-pagination
      background
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageable.total"
      :default-page-size="pageable.pageSize"
      :default-current-page="pageable.pageNum"
      :page-sizes="[10, 25, 50, 100]"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>

  <walletDetailDrawer
    v-if="currentBillNo"
    :show="isShowOrderDetail"
    :bill_no="currentBillNo"
    from="records"
    @close="clearBillNo"
  />
</template>
<script setup>
import { ref, reactive, computed, watch } from "vue";
import {
  getWalletBillsPageNewApi,
  getWalletHomeNewApi,
} from "@/api/wallet/index";
import walletDetailDrawer from "./components/walletDetailDrawer.vue";
import { dayjs } from "element-plus";
import { timestamp } from "@/utils/utils";
const loading = ref(true);
let query = reactive({
  page: 1,
  pagesize: 10,
});
const formData = reactive({
  coin_name: "",
  bill_no: "",
  time: "",
  orderTypes: "",
  status: "",
});

// 分页
const pageable = reactive({
  pageNum: 1,
  pageSize: 10,
  total: 0,
});

const totalCount = ref(0);
const walletOrderList = ref([]);
const coins = ref([]);
const orderTypes = ref([]);
const getCoins = async () => {
  //获取币种列表
  const { coins_list } = await getWalletHomeNewApi();
  coins.value = coins_list;
};
getCoins();
const getWalletBills = async () => {
  try {
    loading.value = true;
    const { page, list, extra } = await getWalletBillsPageNewApi(query);
    walletOrderList.value = list;
    pageable.total = page.total_count;
    totalCount.value = page.total_count;
    orderTypes.value = extra.trade_type_map;
    loading.value = false;
  } catch (e) {
    loading.value = false;
    return false;
  }
};
const handleCurrentChange = async (number) => {
  query.page = number;
  await getWalletBills();
};
// 条数
const handleSizeChange = (number) => {
  pageable.pageSize = number;
  getWalletBills();
};
getWalletBills();

const calendarChange = (e) => {
  formData.time = e;
  // getWalletBills();
};

const status = ref([
  { key: 0, name: "处理中", type: "" },
  { key: 1, name: "成功", type: "success" },
  { key: 2, name: "失败", type: "danger" },
]);
const getCurrentStatus = (value) => {
  return status.value.find((item) => item.key === value);
};

//处理筛选的参数
const filterQuery = computed(() => {
  return {
    coin_name: formData.coin_name,
    bill_no: formData.bill_no,
    start:
      formData.time && formData.time[0]
        ? timestamp(formData.time[0].valueOf())
        : "",
    end:
      formData.time && formData.time[1]
        ? timestamp(formData.time[1].valueOf())
        : "",
    trade_type: formData.orderTypes,
    status: formData.status,
  };
});
const searchData = () => {
  console.log(formData, filterQuery.value);
  query = { ...query, ...filterQuery.value };
  query = Object.fromEntries(
    Object.entries(query).filter(([key, value]) => {
      // 过滤空值
      return value !== "" && value !== null && value !== undefined;
    })
  );
  query.page = 1;
  getWalletBills();
};
const exportData = () => {
  query = { ...query, export: 1 };
  getWalletBills();
};

const isShowOrderDetail = ref(false);
const currentBillNo = ref(null);
const showCurrentDetail = (scope) => {
  currentBillNo.value = scope.row.bill_no;
};
const clearBillNo = () => {
  currentBillNo.value = "";
};
watch(
  () => currentBillNo.value,
  (newVal) => {
    if (newVal) {
      isShowOrderDetail.value = true;
    } else {
      isShowOrderDetail.value = false;
    }
  }
);
</script>
<style lang="scss">
.filterRow {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
</style>
